fix(ui): quote multi-word font families — one bare digit killed the whole stack#12
Merged
Merged
Conversation
… 2" killed the whole stack Tailwind emits fontFamily entries verbatim into CSS. "Noto Sans Symbols 2" unquoted ends in a bare digit, which is not a valid CSS identifier — making the ENTIRE font-family declaration invalid, silently dropped by Chromium. Consequences since the stack gained that entry: the UI fell back to the browser default font (so JetBrains Mono never showed), and because nothing referenced the emoji family anymore, the bundled emoji font never loaded — emoji rendered blank regardless of font flavor. Families needing quotes now carry them in tailwind.config.js, with a comment explaining the trap. Verified against the real built app under xvfb on a machine with no fonts installed: body computes the JetBrains Mono stack, the latin subset loads, and a screenshot shows JBM glyphs plus full-color emoji in the actual UI. Gate green: lint, typecheck, 121 tests, build.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Root cause of both field reports ("JetBrains Mono isn't rendering" + "emoji completely blank"): Tailwind emits
fontFamilyentries verbatim, and unquotedNoto Sans Symbols 2ends in a bare digit — not a valid CSS identifier — which invalidates the entirefont-familydeclaration. Chromium drops it silently: UI falls back to the default font, nothing references the emoji family, so the emoji font never loads → blank. This poisoned the stack in every build since the symbols font was added (#9), which is why each emoji-font flavor change appeared to fail in the field while isolated probes (hand-written, quoted CSS) passed.Fix: quote the multi-word families in
tailwind.config.js+ a comment documenting the trap.Verified against the real built app under xvfb on a fontless machine: body computes the JBM stack, faces load, and the screenshot shows JetBrains Mono + full-color 🧭🐣✅ in the actual UI.
Gate green: lint · typecheck · 121 tests · build.